<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>{$system_name}</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileColor" content="#0e90d2">
    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
    <!--
  <link rel="canonical" href="http://www.example.com/">
  -->
    <link rel="stylesheet" href="__PUBLIC__/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/app.css">
    <!--<link rel="stylesheet" href="__PUBLIC__/assets/css/index.css">-->
    <!--必要样式-->
    <style>
    </style>
</head>

<body>
<header data-am-widget="header" class="am-header am-header-default">
    <div class="am-header-left am-header-nav">
        <a href="__APP__/Home/Index" class="">
            <img src="__PUBLIC__/assets/i/left.png" alt="" style="margin: 5px">
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="#title-link" class="">
            第一轮赛事排行榜
        </a>
    </h1>
</header>
<style>
    .rank-header{
        /*background: #333;*/
        background: #efefef;
        line-height: 40px;
        color: #333;
        font-size: 15px;
    }
    .rank{
        color: #333;
        line-height:52px;
        font-size: 13px;
    }
    .rank-item{
        border: 1px solid #F2F2F2;
    }
    .rank-item .name{
        width: 69%;
        display: inline-block;
        padding-left: 5%;
        word-break:keep-all;/* 不换行 */
        white-space:nowrap;/* 不换行 */
        overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow:ellipsis;
        vertical-align: middle;
    }
    .rank-item-num{
        font-size: 15px;
    }
    [data-am-widget=tabs] {
        margin: 0px;
    }
    .am-tabs-bd{
        border: none;
    }
    .am-tabs-d2 .am-tabs-nav>.am-active a{
        color: #333;
    }
    .am-tabs-d2 .am-tabs-nav>.am-active{
        border-color:#333 ;
    }
    .am-tabs-d2 .am-tabs-nav>.am-active:after{
        border-bottom-color: #333;
    }
    .am-tabs-bd .am-tab-panel{
        padding: 0;
    }
    .am-tabs-d2 .am-tabs-nav{
        background: #DDD;
    }
</style>
<div data-am-widget="tabs"
     class="am-tabs am-tabs-d2"
>
    <ul class="am-tabs-nav am-cf" id="doc-my-tabs">
        <li class="am-active"><a href="[data-tab-panel-0]" data-type="0">胜率榜</a></li>
        <li class=""><a href="[data-tab-panel-1]" data-type="1">对战次数榜</a></li>
        <li class=""><a href="[data-tab-panel-2]" data-type="2">金币榜</a></li>
        <li class=""><a href="[data-tab-panel-3]" data-type="3">钻石榜</a></li>
    </ul>
    <div class="am-tabs-bd">
        <!--胜率-->
        <div data-tab-panel-0 class="am-tab-panel am-active">
            <span style="padding-left: 20px;font-size: 11px;background-color: #efefef;display: block;color: #FABE30;margin-bottom:-10px ;">*当前为{$screenings}场以上的排行</span>
             <div class="intergral" id="winning_p">

            </div>
        </div>
        <!--对战次数-->
        <div data-tab-panel-1 class="am-tab-panel ">
            <div class="intergral" id="battle_times">
            </div>
        </div>
        <!--金币榜-->
        <div data-tab-panel-1 class="am-tab-panel ">
            <div class="intergral" id="gold_list">
            </div>
        </div>
        <!--钻石榜-->
        <div data-tab-panel-1 class="am-tab-panel ">
            <div class="intergral" id="integral_list">
            </div>
        </div>
    </div>
</div>


<!--[if (gte IE 9)|!(IE)]><!-->
<script src="__PUBLIC__/assets/js/jquery.min.js"></script>
<script src="__PUBLIC__/assets/js/angular.min.js"></script>
<script src="__PUBLIC__/assets/js/amazeui.min.js"></script>
<script type="text/javascript">

    $('#doc-my-tabs').find('a').on('opened.tabs.amui', function(e) {
        var type = $(this).data('type');
        getRankList(type);
    });
    function getRankList(type) {
        var url = '';
        if(type == 0){
            url = '__URL__/ajaxWinningList';
        }else if(type == 1){
            url = '__URL__/ajaxBattleTimesList';
        }
        else if(type == 2){
            url = '__URL__/ajaxWinGoldList';
        }
        else if(type == 3){
            url = '__URL__/ajaxWinIntegralList';
        }
        $.ajax({
            type: "POST",
            url: url,
//            dataType: "json",
            success: function (data) {
                if(type == 0){
                    $('#winning_p').empty().append(data);
                }else if(type == 1){
                    $('#battle_times').empty().append(data);
                }
                else if(type == 2){
                    $('#gold_list').empty().append(data);
                }
                else if(type == 3){
                    $('#integral_list').empty().append(data);
                }
                AMUI.gallery.init();
//                $("img .lazy").lazyload();
            },
            error: function (data) {
                console.info(data);
            }
        });
    }
    getRankList(0);
</script>
</body>
</html>

